<template>
  <div>
    <Dialog
      v-model:visible="flagStore.qrcodeVisible"
      modal
      :header="i18nStore.translate('get_qrcode')"
      :style="{ width: '35rem' }"
    >
      <div class="flex justify-center items-center">
        <Qrcode :value="qrcodeUrl" />
      </div>
      <div
        class="absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6 md:relative"
      >
        <button
          @click="close"
          type="button"
          class="button-base w-full secondary hover:opacity-70 hover:scale-110 dark:text-[#00e1ff]"
        >
          <div class="content">{{ i18nStore.translate('close') }}</div>
        </button>
        <button
          type="button"
          class="button-base w-full theme hover:opacity-70 hover:scale-110"
          @click="close"
        >
          {{ i18nStore.translate('great_share') }}
        </button>
      </div>
    </Dialog>
  </div>
</template>
<script setup>
import { useI18nStore, useFileStore, useFlagStore } from '@/stores';
const i18nStore = useI18nStore();
const fileStore = useFileStore();
const flagStore = useFlagStore();

const close = () => {
  flagStore.setQrcodeVisible(false);
};
const qrcodeUrl = computed(() => {
  return createShareLink(
    fileStore.curFileInfo.shareId,
    fileStore.curFileInfo.isSmall
  );
});
const createShareLink = (shareId, Small) => {
  const id = btoa(`${shareId}`);
  const isSmall = btoa(`${Small}`);
  return `https://okpan.fun/share/${id}/post/${isSmall}`;
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
